<template>
  <div class="home-transformer">
    <div v-for="v in data" :key="v.label" class="home-transformer__item">
      <img :src="v.imgUrl" alt=""/>
      <div>{{ v.label }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';

const data = ref([
  { label: '美食外卖', imgUrl: '../../../../../public/Type_Img/class01.jpg' },
  { label: '超市便利', imgUrl: '../../../../../public/Type_Img/class02.jpg' },
  { label: '水果鲜花', imgUrl: '../../../../../public/Type_Img/class03.jpg' },
  { label: '买菜', imgUrl: '../../../../../public/Type_Img/class04.jpg' },
  { label: '买药', imgUrl: '../../../../../public/Type_Img/class05.jpg' },
  { label: '甜品饮品', imgUrl: '../../../../../public/Type_Img/class06.jpg' },
  { label: '天天爆红包', imgUrl: '../../../../../public/Type_Img/class07.jpg' },
  { label: '0元领水果', imgUrl: '../../../../../public/Type_Img/class08.jpg' },
  { label: '跑腿', imgUrl: '../../../../../public/Type_Img/class09.jpg' },
  { label: '天天特价', imgUrl: '../../../../../public/Type_Img/class10.jpg' },
  { label: '借钱', imgUrl: '../../../../../public/Type_Img/class11.jpg' },
  { label: '粥粉面点', imgUrl: '../../../../../public/Type_Img/class12.jpg' },
  { label: '宠物用品', imgUrl: '../../../../../public/Type_Img/class13.jpg' },
  { label: '奶茶果汁', imgUrl: '../../../../../public/Type_Img/class14.jpg' },
  { label: '全部', imgUrl: '../../../../../public/Type_Img/class15.jpg' },
] );
</script>

<style lang="scss" scoped>
.home-transformer {
  background-color: #fff;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px;

  &__item {
    font-size: 13px;
    line-height: 15px;
    text-align: center;

    img {
      width: 48px;
      height: 12vw;
    }
  }
}
</style>
